<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <title>系统设置</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="keywords" content="fly,layui,前端社区">
  <meta name="description" content="Fly社区是模块化前端UI框架Layui的官网社区，致力于为web开发提供强劲动力">
  <link rel="stylesheet" href="/res/layui/css/layui.css">
  <link rel="stylesheet" href="/res/css/global.css">
</head>
<body>
<!--头部-->
<div th:replace="~{layout/head_layout :: head_layout}"></div>

<div class="layui-container fly-marginTop fly-user-main">
  <!--菜单布局-->
  <div th:replace="~{layout/user_menu_layout :: user_menu_layout}"></div>

  <div class="fly-panel fly-panel-user" pad20>
    <div id="LAY_minemsg" style="margin-top: 10px;">
      <div id="tclass" lay-filter="tclass"></div>
    </div>
  </div>
</div>

<div class="fly-footer">
  <p><a href="http://fly.layui.com/" target="_blank">Fly社区</a> 2017 &copy; <a
      href="http://www.layui.com/" target="_blank">layui.com 出品</a></p>
  <p>
    <a href="http://fly.layui.com/jie/3147/" target="_blank">付费计划</a>
    <a href="http://www.layui.com/template/fly/" target="_blank">获取Fly社区模版</a>
    <a href="http://fly.layui.com/jie/2461/" target="_blank">微信公众号</a>
  </p>
</div>

<script src="/res/layui/layui.js"></script>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="see">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
  //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
  layui.use(['element', 'table'], function () {
    var element = layui.element;
    var table = layui.table

    //第一个实例
    table.render({
      elem: '#tclass'
      , height: 400
      , url: '/admin/getArticleClass' //数据接口
      , page: true //开启分页
      , limits: [10, 20, 50, 100]
      , loading: true
      , parseData: function (res) { //res 即为原始返回的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.message, //解析提示文本
          "count": res.count, //解析数据长度
          "data": res.data //解析数据列表
        };
      }
      , cols: [
        [ //表头
          {field: 'id', title: 'ID', width: 65, sort: true, fixed: 'left'}
          , {field: 'className', title: '分类名称', width: 140}
          , {field: 'writeRole', title: '写文章需要角色', width: 150, sort: true}
          , {
          field: 'status', title: '是否可见', width: 90, templet: function (data) {
            if (data.status == 1) {
              return '<span style="color: #1E9FFF">可见</span>'
            }
            return '<span style="color: red">不可见</span>'
          }
        }
          , {field: 'createTime', title: '创建时间', width: 177}
          , {field: 'updateTime', title: '最后更新时间', width: 177, sort: true}
          , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
        ]
      ]
    });

    //监听行工具事件
    table.on('tool(tclass)', function (obj) {
      var data = obj.data;
      // console.log(obj)
      if (obj.event === 'see') {

      } else if (obj.event === 'del') {
        layer.confirm('真的删除行么', function (index) {
          obj.del();
          layer.close(index);
        });
      } else if (obj.event === 'edit') {
        layer.prompt({
          formType: 2
          , value: data.email
        }, function (value, index) {
          obj.update({
            email: value
          });
          layer.close(index);
        });
      }
    });
  });
</script>

</body>
</html>
